<template>
  <div>
    <el-card>
      <div class="indent">
        <p>
          订单号
          <el-input
            placeholder="订单号"
            v-model="oder"
            clearable
            size="small /"
          ></el-input>
        </p>
        <p>
          收货人<el-input
            placeholder="收货人"
            v-model="uer"
            clearable
            size="small /"
          ></el-input>
        </p>
        <p>
          手机号<el-input
            placeholder="手机号"
            v-model="tell"
            clearable
            size="small /"
          ></el-input>
        </p>
        <p>
          订单状态<el-input
            placeholder="订单状态"
            v-model="state"
            clearable
            size="small /"
          ></el-input>
        </p>
        <p class="tian" style="margin-top: 10px; width: 370px">
          选择时间
          <el-date-picker
            style="width: 300px; margin-left: 10px"
            v-model="dataa"
            value-format=" yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </p>
        <p style="margin-top: 10px">
          <el-button
            :disabled="dis"
            type="primary"
            @click="inquire"
            class=""
            style="margin-top: 3px"
            >查询</el-button
          >
        </p>
      </div>
      <div class="indentlist">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="orderNo" label="订单号" width="150">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="120">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="120">
          </el-table-column>
          <el-table-column prop="consignee" label="收货人" width="120">
          </el-table-column>
          <el-table-column prop="deliverAddress" label="地址" width="120">
          </el-table-column>
          <el-table-column prop="deliveryTime" label="送达时间" width="120">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="120">
          </el-table-column>
          <el-table-column prop="orderAmount" label="订单金额" width="120">
          </el-table-column>
          <el-table-column prop="orderState" label="订单状态" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-popover placement="right" width="1000" trigger="click">
                <el-table :data="gridDatas">
                  <!-- 查看编辑 -->
                  <el-table-column
                    label="订单号"
                    property="orderNo"
                    width="100"
                  ></el-table-column>
                  <el-table-column
                    label="下单时间"
                    property="orderTime"
                    width="160"
                  ></el-table-column>
                  <el-table-column
                    label="手机号"
                    property="phone"
                    width="160"
                  ></el-table-column>
                  <el-table-column
                    label="收货人"
                    property="consignee"
                  ></el-table-column>
                  <el-table-column
                    label="地址"
                    property="deliverAddress"
                  ></el-table-column>
                  <el-table-column
                    label="送达时间"
                    property="deliveryTime"
                    width="160"
                  ></el-table-column>
                  <el-table-column
                    label="备注"
                    property="remarks"
                  ></el-table-column>
                  <el-table-column
                    label="订单金额"
                    property="orderAmount"
                  ></el-table-column>
                  <el-table-column
                    label="订单状态"
                    property="orderState"
                  ></el-table-column>
                </el-table>
                <el-button
                  slot="reference"
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
              </el-popover>

              <el-button type="text" size="small" @click="redact(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="修改订单"
          :visible.sync="dialogFormVisibles"
          width="600"
          style="box-sizing: border-box"
        >
          <div style="text-align: right; margin-right: 120px">
            <p class="on">
              订单号 <el-input style="width: 370px" v-model="a" />
            </p>
            <p class="on">
              下单时间
              <el-date-picker
                v-model="valuee"
                style="width: 370px"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </p>
            <p class="on">电话 <el-input style="width: 370px" v-model="b" /></p>
            <p class="on">
              收货人 <el-input style="width: 370px" v-model="c" />
            </p>
            <p class="on">
              送货地址<el-input style="width: 370px" v-model="d" />
            </p>
            <p class="on">
              送达时间
              <el-date-picker
                v-model="valuesss"
                style="width: 370px"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </p>
            <p class="on">备注 <el-input style="width: 370px" v-model="h" /></p>
            <p class="on">
              订单金额 <el-input style="width: 370px" v-model="esh" />
            </p>
            <p class="on">
              订单状态 <el-input style="width: 370px" v-model="f" />
            </p>
          </div>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibles = false">取 消</el-button>
            <el-button type="primary" @click="keepbut">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!--修改 -->
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- :data="gridData" -->
    </el-card>
  </div>
</template>

<script>
// detail edit
import { list, detail, edit } from "@/apis/order";
export default {
  data() {
    return {
      dis: false,
      value1: "",
      a: "",
      b: "",
      c: "",
      d: "",
      esh: "",
      f: "",
      h: "",
      dialogFormVisibles: false,
      content: "",
      gridDatas: [],
      valuee: "",
      valuesss: "",
      dialogTableVisible: false,
      state: "",
      tell: "",
      uer: "",
      oder: "",
      pageSize: 4,
      currentPage: 1,
      total: 0,
      dataa: "",
      tableData: [],
      sj: [],
    };
  },
  methods: {
    inquire() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 2000);
      list({
        currentPage: 1,
        pageSize: 1,
        orderNo: this.oder,
        consignee: this.uer,
        phone: this.tell,
      }).then((res) => {
        console.log(res.data.data[0].deliveryTime);

        //
        // res.data.data.deliverAddress
        let time = new Date(res.data.data[0].deliveryTime);
        let tian = new Date(res.data.data[0].orderTime);
        res.data.data[0].orderTime =
          tian.getFullYear() +
          "-" +
          (tian.getMonth() + 1 < 10
            ? " 0" + (tian.getMonth() + 1)
            : tian.getMonth() + 1) +
          "-" +
          (tian.getDate() < 10 ? "0" + tian.getDate() : tian.getDate());
        res.data.data[0].deliveryTime =
          time.getFullYear() +
          "-" +
          (time.getMonth() + 1 < 10
            ? " 0" + (time.getMonth() + 1)
            : time.getMonth() + 1) +
          "-" +
          (time.getDate() < 10 ? "0" + tian.getDate() : time.getDate());

        this.tableData = res.data.data;
      });
    },
    handleSizeChange(newsize) {
      this.pageSize = newsize;
      this.lodae();
    },
    handleCurrentChange(newpage) {
      this.currentPage = newpage;
      this.lodae();
    },
    handleClick(row) {
      // console.log(row);

      detail({ id: row.id }).then((res) => {
        this.gridDatas = [];
        let time = new Date(res.data.data.deliveryTime);
        let tian = new Date(res.data.data.orderTime);
        res.data.data.orderTime =
          tian.getFullYear() +
          "-" +
          (tian.getMonth() + 1 < 10
            ? " 0" + (tian.getMonth() + 1)
            : tian.getMonth() + 1) +
          "-" +
          (tian.getDate() < 10 ? "0" + tian.getDate() : tian.getDate()) +
          (tian.getHours() < 10 ? "0" + tian.getHours() : tian.getHours()) +
          ":" +
          (tian.getMinutes() < 10
            ? "0" + tian.getMinutes()
            : tian.getMinutes()) +
          ":" +
          (tian.getSeconds() < 10
            ? "0" + tian.getMinutes()
            : tian.getMinutes());
        res.data.data.deliveryTime =
          time.getFullYear() +
          "-" +
          (time.getMonth() + 1 < 10
            ? " 0" + (time.getMonth() + 1)
            : time.getMonth() + 1) +
          "-" +
          (time.getDate() < 10 ? "0" + tian.getDate() : time.getDate()) +
          (time.getHours() < 10 ? "0" + time.getHours() : time.getHours()) +
          ":" +
          (time.getMinutes() < 10
            ? "0" + time.getMinutes()
            : time.getMinutes()) +
          ":" +
          (time.getSeconds() < 10
            ? "0" + time.getMinutes()
            : time.getMinutes());
        this.gridDatas.push(res.data.data);
      });
      console.log(this.gridDatas);
      this.dialogTableVisible = true;
    },
    lodae() {
      list({ currentPage: this.currentPage, pageSize: this.pageSize }).then(
        (res) => {
          for (const objs of res.data.data) {
            let time = new Date(objs.deliveryTime);
            let tian = new Date(objs.orderTime);
            objs.orderTime =
              tian.getFullYear() +
              "-" +
              (tian.getMonth() + 1 < 10
                ? " 0" + (tian.getMonth() + 1)
                : tian.getMonth() + 1) +
              "-" +
              (tian.getDate() < 10 ? "0" + tian.getDate() : tian.getDate());
            objs.deliveryTime =
              time.getFullYear() +
              "-" +
              (time.getMonth() + 1 < 10
                ? " 0" + (time.getMonth() + 1)
                : time.getMonth() + 1) +
              "-" +
              (time.getDate() < 10 ? "0" + tian.getDate() : time.getDate());
          }
          this.tableData = res.data.data;
          this.total = res.data.total;

          // console.log(res);
        }
      );
    },
    redact(row) {
      this.id = row.id;
      this.valuee = row.deliveryTime;
      this.valuesss = row.orderTime;
      this.a = row.orderNo;
      this.b = row.phone;
      this.c = row.consignee;
      this.d = row.deliverAddress;
      this.h = row.remarks;
      this.esh = row.orderAmount;
      this.f = row.orderState;
      this.dialogFormVisibles = true;
      console.log(row.deliveryTime);
    },
    keepbut() {
      let time = new Date(this.valuee);
      let tian = new Date(this.valuesss);
      this.valuee =
        tian.getFullYear() +
        "-" +
        (tian.getMonth() + 1 < 10
          ? "0" + (tian.getMonth() + 1)
          : tian.getMonth() + 1) +
        "-" +
        (tian.getDate() < 10 ? "0" + tian.getDate() : tian.getDate()) +
        " " +
        (tian.getHours() < 10 ? "0" + tian.getHours() : tian.getHours()) +
        ":" +
        (tian.getMinutes() < 10 ? "0" + tian.getMinutes() : tian.getMinutes()) +
        ":" +
        (tian.getSeconds() < 10 ? "0" + tian.getMinutes() : tian.getMinutes());
      this.valuesss =
        time.getFullYear() +
        "-" +
        (time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1) +
        "-" +
        (time.getDate() < 10 ? "0" + tian.getDate() : time.getDate()) +
        " " +
        (time.getHours() < 10 ? "0" + time.getHours() : time.getHours()) +
        ":" +
        (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) +
        ":" +
        (time.getSeconds() < 10 ? "0" + time.getMinutes() : time.getMinutes());
      console.log(this.valuee, this.valuesss);
      edit({
        id: this.id,
        orderNo: this.a,
        orderTime: this.valuee,
        phone: this.b,
        consignee: this.c,
        deliverAddress: this.d,
        deliveryTime: this.valuesss,
        remarks: this.h,
        orderAmount: this.esh,
        orderState: this.f,
      }).then((res) => {
        if (res.data.code == 0) {
          this.lodae();
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.lodae();
          this.dialogFormVisibles = false;
        }
      });
    },
  },

  created() {
    this.lodae();
  },
};
</script>

<style lang="less" scoped>
.indent {
  display: flex;
  flex-wrap: wrap;

  p {
    height: 30px;
    width: 24%;
    font-size: 14px;
    display: flex;
    line-height: 30px;
    .el-input {
      width: 180px;
      padding-left: 10px;
    }
  }
  .el-button {
    width: 70px;
    height: 30px;
    font-size: 14px;
    line-height: 10px;
  }
}
.indentlist {
  margin-top: 20px;
}
.page {
  margin: 20px 0;
}
.on {
  margin-bottom: 15px;
}
</style>